<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="/static/css/public.css" media="all">
		<style>
			body {
				background-color: #ffffff;
			}

			.img {
				width: 300px;
				height: 300px;
				border: black 1px solid;
				background-color: darkgrey;
				object-fit: cover;
				object-position: 50% 20%;
			}

			/* 图片自适应的样式 */
			.img-object {
				object-fit: cover;
				object-position: 50% 20%;
			}
		</style>
	</head>
	<body>

		<div class="layui-upload">
			<button type="button" class="layui-btn" id="upload_img">图片上传</button>
			<button type="button" id="remove-img" class="layui-btn layui-btn-sm layui-btn-normal"><i
					class="layui-icon"></i> 删除已上传图片</button>
			<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				预览图：
				<div class="layui-upload-list" id="view_upload_img"></div>
			</blockquote>
		</div>

		<div class="layui-form layuimini-form">

			<div class="layui-form-item">
				<label class="layui-form-label required">标题</label>
				<div class="layui-input-block">
					<input type="text" name="course_title" lay-verify="required" lay-reqtext="标题不能为空"
						placeholder="请输入标题" value="" class="layui-input">
					<!-- <tip>填写自己管理账号的名称。</tip> -->
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label required">类目</label>
				<div class="layui-input-block">
					<select id="contents" name="contents" lay-filter="leimu" lay-verify="required">
						<option value="" selected=""></option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">标签</label>
				<div class="layui-input-block">
					<select id="label" name="label" lay-filter="biaoqian">
						<option value="" selected=""></option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label required">正常价格</label>
				<div class="layui-input-block">
					<input type="number" name="normal_price" lay-verify="required" lay-reqtext="价格不能为空"
						placeholder="请输入价格" value="" class="layui-input">
				</div>
			</div>
			<!-- <div class="layui-form-item">
				<label class="layui-form-label required">VIP价格</label>
				<div class="layui-input-block">
					<input type="number" name="vip_price" lay-verify="required" lay-reqtext="价格不能为空" placeholder="请输入价格"
						value="" class="layui-input">
				</div>
			</div> -->
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label required">课程介绍</label>
				<div class="layui-input-block">
					<textarea name="courses_introduce" class="layui-textarea" lay-verify="required"
						placeholder="请输入课程介绍"></textarea>
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label required">课程目录</label>
				<div class="layui-input-block">
					<textarea name="courses_contents" class="layui-textarea" lay-verify="required"
						placeholder="请输入课程目录"></textarea>
				</div>
			</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
				</div>
			</div>
		</div>
		<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script>
			function getCookie(name) {
				var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
				return r ? r[1] : undefined;
			}

			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.$,
					upload = layui.upload,
					element = layui.element;


				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_contents_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						// console.log(res);
						$.each(res.data, function(index, value) {
							// console.log(index);
							// console.log(value);
							if (value.contents_level != "0") {
								console.log(value.contents_level)
								$.each(res.data, function(index, valueparent) {
									console.log(valueparent.contents_level)
									if (value.contents_level == valueparent.contents_id) {
										$('#contents').append(new Option(valueparent
											.contents_name +
											" > " + value.contents_name, value
											.contents_id));
									}
								})
							} else {
								$('#contents').append(new Option(value.contents_name, value
									.contents_id)); // 下拉菜单里添加元素
							}

						});
						layui.form.render("select");
					}
				});

				$.ajax({
					type: "post", //get或者post
					contentType: 'application/json',
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					url: '/api/v1.0/get_labels_all_list',
					data: {}, //参数 接口传参 json对象
					success: function(res) {
						console.log(res);
						$.each(res.data, function(index, value) {
							console.log(index);
							console.log(value);
							$('#label').append(new Option(value.label_name, value
								.label_id)); // 下拉菜单里添加元素
						});
						layui.form.render("select");
					}
				});


				var course_img = new Array();
				//多图片上传
				upload.render({
					elem: '#upload_img',
					url: '/api/v1.0/upload_img' //此处配置你自己的上传接口即可
						,
					headers: {
						'X-CSRFToken': getCookie('csrf_token')
					},
					multiple: true,
					done: function(res) {
						//在course_img数组中加入图片链接
						course_img.push(res.data["file_name"])
						var num = 0
						for (key in course_img) {
							num += 1;
						}
						$('#view_upload_img').append('<img src="' + res.data["course_url"] +
							'" class="img" onclick="remove_img()">')
						// console.log(course_img)
						layer.close(layer.msg()); //关闭上传提示窗口
					}
				});

				// 删除图片并清空course_img数组
				$(document).ready(function() {
					$("#remove-img").click(function() {
						course_img = [];
						// layer.alert(course_img)
						$("img").each(function(i, e) {
							$(this).remove();
						});
					});
				});


				var img_data = {
					"course_img": course_img
				}
				//监听提交
				form.on('submit(saveBtn)', function(data) {
					if (course_img.length==0){
						layer.msg("至少上传一张图片");
						return false;
					}
					
					console.log(data)
					console.log(data.field)
					var requests_data = data.field;
					requests_data.course_img = course_img;
					// console.log(requests_data)
					$.ajax({
						type: "post", //get或者post
						contentType: 'application/json',
						headers: {
							'X-CSRFToken': getCookie('csrf_token')
						},
						url: '/api/v1.0/add_courses',
						data: JSON.stringify(requests_data), //参数 接口传参 json对象
						success: function(res) {
							var index = layer.alert("保存成功", {
								title: '操作'
							}, function() {
								// 关闭弹出层
								layer.close(index);
								// 刷新列表页
								window.parent.location.reload()
							});

						}
					});


					return false;
				});

			});
		</script>
	</body>
</html>
